<template>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>
            <a href="/">审批流程</a>
        </el-breadcrumb-item>
        <el-breadcrumb-item>审批人配置</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 查询区域 -->
    <div style="border: solid 1px #ccc ; padding: 20px; margin: 12px; min-width: 300px; ">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
  <el-form-item label="姓名">
                <el-input placeholder="请输入姓名" />
            </el-form-item>


            <!-- <el-form-item label="行业">
                <el-select @change="getCategorys()" v-model="formInline.IndustryId" placeholder="请选择行业" clearable>
                    <el-option v-for="item in industrys" :label="item.industryName" :value="item.id" />
                </el-select>
            </el-form-item>


            <el-form-item label="流程类别">
                <el-select @change="getForms" v-model="formInline.CategoryCode" placeholder="请选择类别" clearable>
                    <el-option v-for="item in categorys" :label="item.formCategoryName"
                        :value="item.formCategoryCode" />
                </el-select>
            </el-form-item>

            <el-form-item label="流程表单">
                <el-select @change="GetFormFields()" v-model="formInline.FormId" placeholder="请选择流程表单" clearable>
                    <el-option v-for="item in forms" :label="item.formName" :value="item.id" />
                </el-select>
            </el-form-item> -->

            <el-form-item>
                <el-button type="primary" @click="search">查询</el-button>
            </el-form-item>

            <el-form-item>
                <el-button type="success" @click="reset">新增审批人</el-button>
            </el-form-item>
        </el-form>
    </div>
    <!--  我的流程列表 -->
    <div style="border: solid 1px #ccc ; padding: 20px; margin: 12px; min-width: 300px;">
       
       
        <!-- {{ tableData }} -->
        <el-table :data="tableData" style="width: 100%">
            <el-table-column type="index" label="序号" width="80" />
            <!-- <el-table-column prop="formCode" label="表单编号" width="100" />
            <el-table-column prop="formName" label="表单名称" width="200" /> -->
            <el-table-column prop="node" label="节点" width="120" />            
            <el-table-column prop="currentOperatorName" label="姓名" width="120" />
            <el-table-column prop="phone" label="手机号" width="200" />
            <el-table-column prop="depart" label="部门" width="120" />
            <el-table-column prop="role" label="角色" width="120" />

            <!-- <el-table-column prop="updateTime" label="操作时间" width="120">
                <template #default="scope">
                    {{ moment(scope.row.updateTime).format("YYYY-MM-DD HH:mm:ss") }}
                </template>
            </el-table-column> -->

            <el-table-column fixed="right" label="操作" min-width="120">
                <template #default="scope">
                           <el-button link type="primary" size="small" @click="OpenOperaDialog(scope.row)">
                        上移
                    </el-button>
                      <el-button link type="primary" size="small" @click="OpenOperaDialog(scope.row)">
                        下移
                    </el-button>
                    <!-- <el-button link type="success" size="small" @click="OpenOperaDialog(scope.row)">
                        {{ Math.ceil( (Math.random()*100))%2==0?'启用':'禁用' }} 
                    </el-button> -->
                    <el-button link type="danger" size="small" @click="OpenOperaDialog(scope.row)">
                        删除
                    </el-button>

                </template>
            </el-table-column>
        </el-table>

        <el-pagination
      v-model:current-page="page.PageIndex"
      v-model:page-size="page.PageSize"
      :page-sizes="[2,4,6,8]"
      :size="page.PageSize" 
      layout="total, sizes, prev, pager, next, jumper"
      :total="400"
    />

    </div>














    

    <el-dialog title="流程处理" v-model="operaDialog" width="1100">
 <!-- {{ instanceContents }} -->
        
        <el-form :inline="true" :model="formInline" class="demo-form-inline" style="width:1200px">


            <template v-for="field in instanceContents" style="width:900px">

                <el-form-item v-if="field.fieldComponent == 1" :label="field.fieldDes" style="width:300px" >
                    <el-input v-model="field.fieldValue" placeholder="" clearable :disabled="true" />
                </el-form-item>
                <el-form-item v-if="field.fieldComponent == 2" :label="field.fieldDes" style="width:300px" >
                    <el-date-picker v-model="field.fieldValue" type="date" placeholder="Pick a date" clearable :disabled="true" />
                </el-form-item>
                <el-form-item v-if="field.fieldComponent == 3" :label="field.fieldDes" style="width:300px" >
                    <el-input v-model="field.fieldValue" placeholder="" show-password width="280" clearable  :disabled="true" />
                </el-form-item>
                <el-form-item v-if="field.fieldComponent == 4" :label="field.fieldDes" style="width:300px" >
                    <el-select v-model="field.fieldValue" :placeholder="'请选择' + field.fieldDes" clearable  :disabled="true">
                        <el-option v-for="item in JSON.parse(field.fieldOptions) " width="280" :label="item.value"
                            :value="item.value" />
                    </el-select>
                </el-form-item>

                <el-form-item v-if="field.fieldComponent == 5" :label="field.fieldDes" style="width:300px"   :disabled="true" >
                    <el-radio-group v-model="field.fieldValue">
                       <el-radio v-for="item in JSON.parse(field.fieldOptions)" :value="item.value">{{ item.value
                            }}</el-radio>
                    </el-radio-group>
                </el-form-item>

                <!-- <el-form-item v-if="field.fieldComponent == 7" :label="field.fieldDes" width="280">
                    <el-checkbox-group :v-model="JSON.parse(field.fieldValue||'[]')">
                            <el-checkbox v-for="item in JSON.parse(field.fieldOptions)"  :value="item.value" name="type">
                            {{ item. value}}
                            </el-checkbox> 
                            </el-checkbox-group>
              </el-form-item>  -->

                <el-form-item v-if="field.fieldComponent == 8" :label="field.fieldDes" style="width:300px" >
                     <el-input v-model="field.fieldValue" type="textarea" :disabled="true" />
                </el-form-item>

            </template>
            <br>
            <el-button type="primary" @click="">同意</el-button>
            <el-button type="danger" @click="">拒绝</el-button>

        </el-form>
        
    </el-dialog>

</template>

<script lang="ts" setup>
import myAxios from '@/http/axiosHelper';
import { ElMessage } from 'element-plus';
import { onMounted, reactive, ref, watch } from 'vue'
import { useCounterStore } from '@/stores/counter';
import moment from 'moment'

const pinia = useCounterStore()

 
const formInline = reactive({
    FormId: null,
    NodeName: '',
    IndustryId: null, //查询列表的时候用不到
    CategoryCode: ''//查询列表的时候用不到,用于3级联动
})

const industrys = ref([])
const getIndustrys = () => {

    myAxios.get('/PERead/ProcessEngine/GetIndustry').then(res => {
        industrys.value = res.data.data
    })
    formInline.IndustryId = null;
}

const categorys = ref([{
    "id": 700061378039813,
    "formCategoryName": "邻里纠纷问题",
    "formCategoryCode": "T0001",
    "industryId": 3,
    "industryName": "教育"
}])
const getCategorys = () => {

    myAxios.get('/PERead/ProcessEngine/SearchFormCategory', { params: { IndustryId: formInline.IndustryId } }).then(res => {
        categorys.value = res.data.data
    })
    formInline.CategoryCode = ''
}


const forms = ref([{
    "id": 702835120816133,
    "formCode": "F00009",
    "formName": "学生请假流程(物联网学院)"
}])

const getForms = () => {

    myAxios.get('/PERead/ProcessEngine/GetFormPages', { params: { CategoryCode: formInline.CategoryCode } }).then(res => {
        forms.value = res.data.pageDatas
    })
    formInline.FormId = null
}

const names = ['张颜良','李许可','王真','刘利瓦','新鲜越','王锡','秦颂','孟曹德'];
const flows = ['请假流程','复学流程','活动课申请流程','课表变更流程','新生入驻流程','补课申请流程','实践课流程','优秀奖学金申请流程'];
const phones=['13612345678','13612345678','13612345678','13612341234','13612345678','1369865432','1689865432'];
const departs= ['专高教研组','专业教研组','专基教研组'];
const nodes = ['学生申请','班长审批','讲师审批','辅导老师审批','院办申请']
const roles= ['讲师','辅导老师','班长'];
const page = reactive({
    PageIndex: 1,
    PageSize: 10,
    totalCount: 0
})
const tableData = ref([{processName:'13510660632',depart:'物联网',node:'学生申请', phone:'15612345678',currentOperatorName:'高透明', role:'辅导老师', updateTime:new Date()}])
const search = () => {
    myAxios.get('/PERead/Instance/GetMyInstances', {
        params: {
            PageIndex: page.PageIndex,
            PageSize: page.PageSize,
            Me: pinia.loginDto.accountName,
            FormId: formInline.FormId
        }
    }).then(res => {
       // tableData.value = res.data.pageDatas
        page.totalCount = res.data.totalCount
    })
    for(var i=0;i<=7;i++){
        tableData.value.push({
            role:roles[Math.floor(Math.random()*3)],
            processName:flows[Math.floor(Math.random()*5) ], 
            phone:phones[Math.floor(Math.random()*4) ], 
             depart:departs[Math.floor(Math.random()*3) ], 
            currentOperatorName:names[Math.ceil(Math.random()*7) ],
            node:nodes[Math.floor(Math.random()*5) ],
            updateTime:new Date()})
    }
}
const reset = () => {
    formInline.FormId = null
    formInline.IndustryId = null
    formInline.CategoryCode = ''
}


//操作流程
const operaDialog = ref(false)
const instanceContents =ref(<any>[])
const OpenOperaDialog=(row:any)=>{
    operaDialog.value =true;
     instanceContents.value = JSON.parse(row.formContent)
}

onMounted(() => {
    search();
    getIndustrys()
})


</script>


<style>
.demo-form-inline .el-input {
    --el-input-width: 220px;
}

.demo-form-inline .el-select {
    --el-select-width: 220px;
}
</style>